<div class="row" ng-controller="adminGroup">
<% include public/modal %>
<div class="col-xs-12">
    <div class="panel">
        <a href="#addAdminGroup" role="button" class="btn btn-primary btn-sm" data-toggle="modal"><span class="fa fa-plus-square" aria-hidden="true">&nbsp;</span>增加一个用户组</a>
    </div>
    <div class="box">
        <div class="box-body table-responsive no-padding" >
            <table class="table table-hover">
                <tr>
                    <th><input type="checkbox" class="mini" id="selectAll"/></th>
                    <th>组名称</th>
                    <th>权限范围</th>
                    <th>管理</th>
                </tr>
                <tr class="datalist" ng-repeat="group in data">
                    <td><input type="checkbox" name="listItem" class="mini" value="{{group._id}}" ng-click="getNewIds()"/></td>
                    <td class="  sorting_1">{{group.name}}</td>
                    <td class=" " title="{{group.power}}">{{group.power | limitTo : 80}}</td>
                    <td class=" ">
                        <button class="btn btn-primary btn-xs" data-whatever="{{group._id}}" data-toggle="modal" data-target="#addAdminGroup"><span class="fa fa-fw fa-edit" aria-hidden="true"></span>编辑</button>&nbsp;
                        <button class="btn btn-default btn-xs" ng-click="delOneItem(group._id)"><span class="fa fa-fw fa-trash-o" aria-hidden="true"></span>删除</button>
                    </td>
                </tr>
            </table>
        </div><!-- /.box-body -->
        <% include public/tableFooter %>
    </div><!-- /.box -->

</div><!-- /.col -->


<!--添加用户组模态窗口-->
<div class="modal fade" id="addAdminGroup">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">添加用户组</h4>
            </div>
            <div class="modal-body">
                <form role="form" class="form-horizontal" name="myForm" ng-submit="processForm(myForm.$valid)" novalidate>
                    <div class="form-group">
                        <label class="control-label col-sm-4">组名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control" name="name" ng-model="formData.name" ng-pattern="/^[\u4e00-\u9fa5]{2,10}$/" required/>
                            <label for="inputError" class="control-label text-danger" ng-show="myForm.name.$invalid && !myForm.name.$pristine"><i class="fa fa-times-circle-o"></i> 2-10个中文字符</label>
                        </div>
                    </div>
                    <div class="form-group">
                        <ul class="ztree" id="groupPowerTree" style="height: 450px;overflow-y: auto;padding:10px 30px;"></ul>
                    </div>
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary" ng-disabled="myForm.$invalid">提交</button>
                    </div>
                </form>

            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

 </div><!-- /.row -->

</div>


<script>
    /*targetID:全局对应指定记录的标记，在修改和删除时使用*/
            doraApp.controller("adminGroup",function($scope,$http){
//                初始化名称和权限
                $scope.formData = {};
                $scope.formData.power = {};
                $scope.checkInfo = {};
                //获取管理员用户组列表
                initPagination($scope,$http,"<%=bigCategory%>","<%=searchKey%>");
//                初始化管理栏目列表
                initPowerList($scope);
                //删除用户
                initDelOption($scope,$http,"<%=bigCategory%>","<%=searchKey%>",'您确认要删除选中的用户组吗？');

//                修改用户
                $('#addAdminGroup').on('show.bs.modal', function (event) {
                    var obj = $(event.relatedTarget);
                    var editId = obj.data('whatever');
                    var modalTitle = $(this).find('.modal-title');
//                    如果不为空则为编辑状态
                    if(editId){
                        modalTitle.text("编辑用户组");
                        $http.get("/admin/manage/<%=bigCategory%>/item?uid="+editId).success(function(result){
                            $scope.formData.name = result.name;
                            if(result.power){
                                $scope.formData.power = JSON.parse(result.power);

//                            回选checkbox
                                var powerTreeObj = eval(result.power);
                                for(var i=0;i<powerTreeObj.length;i++){
                                    var checkedId = powerTreeObj[i].split(':')[0];
                                    var treeObj = $.fn.zTree.getZTreeObj("groupPowerTree");
                                    var node = treeObj.getNodeByParam("id", checkedId, null);
                                    if(node){
                                        node.checked = true;
                                        treeObj.updateNode(node);
                                    }
                                }
                            }

                            $scope.targetID = editId;


                        })
                    }else{
                        modalTitle.text("添加新用户组");
                        cancelTreeCheckBoxSelect("groupPowerTree");
                        $scope.formData = {};
                    }
                }).on('hidden.bs.modal', function (e) {
                    // 清空数据
                    $scope.formData = {};
                    $scope.targetID ="";
                    $(this).find("input").val("");
                    cancelTreeCheckBoxSelect("groupPowerTree");
                });

//                添加新用户组
                $scope.processForm = function(isValid){
                    var curentUrl = "/admin/manage/<%=bigCategory%>/addOne";

                    if($scope.targetID)
                    {
                        curentUrl = "/admin/manage/<%=bigCategory%>/modify?uid="+$scope.targetID;
                    }
                    var groupData = {
                        name : $scope.formData.name,
                        power : JSON.stringify($scope.formData.power)
                    };

                    angularHttp($http,isValid,'POST',curentUrl,groupData,function(data){
                        initPagination($scope,$http,"<%=bigCategory%>","<%=searchKey%>");
                    });


                }
            });

    function initPowerList($scope){

        var setting = {
            view: {
                selectedMulti: false
            },
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeCheck: beforeCheck,
                onCheck: onCheck
            }
        };

        var zNodes = setAdminPowerTreeData();

        var code, log, className = "dark";
        function beforeCheck(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            return (treeNode.doCheck !== false);
        }
        function onCheck(e, treeId, treeNode) {

            var zTree = $.fn.zTree.getZTreeObj("groupPowerTree"),
                    checkedNodes = zTree.getCheckedNodes(true);
            var nodesArr = [];
            for(var i=0;i<checkedNodes.length;i++){
                var currentNode = checkedNodes[i];
                nodesArr.push(currentNode.id + ':' + true);
            }
            $scope.formData.power = nodesArr;

        }

        $.fn.zTree.init($("#groupPowerTree"), setting, zNodes);
    }

</script>